<template>
  <div class="query-container">
    <div class="shawBox">
      <el-form :inline="true" :model="queryForm" class="query-form">
        <el-form-item label="发布者:">
          <el-input
            v-model="queryForm.loginName"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="公告标题:">
          <el-input v-model="queryForm.title" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="发布状态:">
          <el-select
            v-model="queryForm.status"
            style="width: 140px"
            placeholder="请选择"
          >
            <el-option label="请选择" value=""></el-option>
            <el-option label="已发布" value="1"></el-option>
            <el-option label="未发布" value="0"></el-option>
          </el-select>
        </el-form-item>
        <div style="float: right">
          <el-button type="primary" @click="getNoticesFull">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
          <el-button type="primary" @click="handleAddNoticeBtn"
            >新增公告</el-button
          >
        </div>
      </el-form>
      <el-table
        :data="tableData"
        class="custom-table"
        style="width: 100%"
        height="calc(100vh - 240px)"
      >
        <el-table-column label="序号" width="60" align="center">
          <template #default="scope">
            {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="title" label="公告标题">
          <template #default="scope">
            <el-tooltip
              :content="scope.row.title"
              placement="top-start"
              custom-class="custom-tooltip"
            >
              <span
                style="
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: block;
                  width: 100%;
                "
                >{{ scope.row.title }}</span
              >
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          prop="noticeType"
          label="公告类型"
          width="80"
        ></el-table-column>
        <el-table-column
          prop="effectiveTime"
          label="开始时间(UTC)"
        ></el-table-column>
        <el-table-column
          prop="expireTime"
          label="结束时间(UTC)"
        ></el-table-column>
        <el-table-column
          prop="loginName"
          label="发布者"
          width="80"
        ></el-table-column>
        <el-table-column
          prop="updateTime"
          label="发布时间(UTC)"
        ></el-table-column>
        <el-table-column label="发布状态" width="100"
          ><template #default="scope">
            <span v-if="scope.row.isPublished"> 已发布 </span>
            <span v-else> 未发布 </span>
          </template></el-table-column
        >
        <el-table-column label="操作" width="160">
          <template #default="scope">
            <el-button
              v-if="!scope.row.isPublished"
              link
              type="primary"
              @click="toPublished(scope.row.id)"
              size="small"
              >发布</el-button
            >
            <el-button
              v-if="scope.row.isPublished"
              link
              type="primary"
              @click="toFindDetail(scope.row.id)"
              size="small"
              >查看</el-button
            >
            <el-button
              v-if="!scope.row.isPublished"
              link
              type="primary"
              size="small"
              @click="toSeeDetail(scope.row.id)"
              >预览</el-button
            >
            <el-button
              @click="deleteNoticesId(scope.row.id)"
              link
              type="primary"
              size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="margin-top: 15px; float: right; text-align: center"
      >
      </el-pagination>
    </div>
    <!-- 预览/查看 -->
    <div
      class="shawBox"
      style="position: absolute; top: 0; left: 0; bottom: 0; right: 0"
      v-if="detailBoxRef"
    >
      <div style="float: right; overflow: hidden">
        <el-button v-if="isEdit" type="primary" @click="handleEidt"
          >修改</el-button
        >
        <el-button @click="toBack">返回</el-button>
      </div>
      <p class="shawTitle"><i></i>{{ lookData.noticeTitleZh }}</p>
      <div class="contextTextBox" v-html="lookData.noticeContentZh"></div>
      <p class="shawTitle"><i></i>{{ lookData.noticeTitleEn }}</p>
      <div class="contextTextBox" v-html="lookData.noticeContentEn"></div>
      <p class="shawFooter">{{ lookData.updateTime }}</p>
    </div>
    <!-- 新增公告弹窗 -->
    <div
      class="shawBox"
      style="
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        overflow-y: auto;
      "
      v-if="isAddNotice"
    >
      <div style="float: right; margin: 10px 20px">
        <el-button v-if="isEdit" type="primary" @click="handleAddNotice"
          >保存</el-button
        >
        <el-button v-if="!isEdit" type="primary" @click="handleAddNotice"
          >保存</el-button
        >
        <el-button @click="handleResetAddForm">重置</el-button>
        <el-button @click="handleCancelAdd">返回</el-button>
      </div>
      <el-form
        :model="addNoticeForm"
        :rules="addNoticeRules"
        ref="addNoticeFormRef"
        label-width="160px"
        class="add-notice-form"
        style="
          margin: 20px;
          margin-top: 12px;
          width: calc(100% - 300px);
          max-width: 960px;
        "
      >
        <div
          style="
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            gap: 20px;
            width: 100%;
          "
        >
          <el-form-item
            label="有效开始时间(UTC)："
            prop="validStartTime"
            style="margin-bottom: 0; flex: 1"
          >
            <el-date-picker
              v-model="addNoticeForm.validStartTime"
              type="datetime"
              placeholder="请选择"
              value-format="YYYY/MM/DD HH:mm:ss"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
          <el-form-item
            label="有效结束时间(UTC)："
            prop="validEndTime"
            style="margin-bottom: 0; flex: 1"
          >
            <el-date-picker
              v-model="addNoticeForm.validEndTime"
              type="datetime"
              placeholder="请选择"
              value-format="YYYY/MM/DD HH:mm:ss"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
          <el-form-item
            label="公告类型："
            prop="noticeType"
            label-width="100px"
            style="margin-bottom: 0; flex: 1"
          >
            <el-select
              v-model="addNoticeForm.noticeType"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in noticeTypeOptions"
                :key="item.typeId"
                :label="item.typeDesc"
                :value="item.typeId"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
        <el-form-item label="公告标题(中文)：" prop="noticeTitleZh">
          <el-input
            v-model="addNoticeForm.noticeTitleZh"
            placeholder="请输入"
            style="width: 100%"
          ></el-input>
        </el-form-item>
        <el-form-item label="公告标题(英文)：" prop="noticeTitleEn">
          <el-input
            v-model="addNoticeForm.noticeTitleEn"
            placeholder="请输入"
            style="width: 100%"
          ></el-input>
        </el-form-item>
        <el-form-item label="公告内容(中文)：" prop="noticeContentZh">
          <div
            ref="editorContainerZh"
            style="border-radius: 15px; width: 100%; height: 200px"
          ></div>
        </el-form-item>
        <el-form-item label="公告内容(英文)：" prop="noticeContentEn">
          <div
            ref="editorContainerEn"
            style="border-radius: 15px; width: 100%; height: 200px"
          ></div>
        </el-form-item>

        <!-- 中文文件上传 -->
        <el-form-item label="上传文件(中文)：">
          <el-upload
            action="#"
            :auto-upload="false"
            :file-list="addNoticeForm.fileListZh"
            :on-change="
              (file, fileList) => (addNoticeForm.fileListZh = fileList)
            "
          >
            <el-button type="primary">选择文件</el-button>
          </el-upload>
        </el-form-item>
        <!-- 英文文件上传 -->
        <el-form-item label="上传文件(英文)：">
          <el-upload
            action="#"
            :auto-upload="false"
            :file-list="addNoticeForm.fileListEn"
            :on-change="
              (file, fileList) => (addNoticeForm.fileListEn = fileList)
            "
          >
            <el-button type="primary">选择文件</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <div class="tipText">*项为必填项</div>
    </div>
  </div>
  <div style="height: 10px"></div>
</template>

<script setup>
import { ref, onUnmounted, nextTick, watch, onMounted } from "vue";
import { ElMessage } from "element-plus";
import WangEditor from "wangeditor"; // 4.7.15 版本
import {
  noticesFullApi,
  deleteNoticesIdApi,
  noticesIdApi,
  postNoticesApi,
  typesNoticeApi,
  putNoticesIdPublishApi,
  putNoticesApi,
} from "@/api/other";

// 编辑器实例和内容
const editorZh = ref(null); // 中文编辑器实例
const editorEn = ref(null); // 英文编辑器实例
const editorContainerZh = ref(null); // 中文编辑器容器
const editorContainerEn = ref(null); // 英文编辑器容器
const editorInitializedZh = ref(false); // 中文编辑器初始化标记
const editorInitializedEn = ref(false); // 英文编辑器初始化标记

const detailBoxRef = ref(false);
const isEdit = ref(false);
const backData = ref({});
// 表单引用
const addNoticeFormRef = ref(null);

// 控制新增公告弹窗显示
const isAddNotice = ref(false);
// 新增公告的表单数据
const addNoticeForm = ref({
  noticeTitleZh: "", // 中文标题
  noticeTitleEn: "", // 英文标题
  noticeContentZh: "", // 中文内容
  noticeContentEn: "", // 英文内容
  validStartTime: "",
  validEndTime: "",
  noticeType: "",
  fileListZh: [], // 中文文件
  fileListEn: [], // 英文文件
});
// 查看/预览回显数据
const lookData = ref({
  noticeTitleZh: "", // 中文标题
  noticeTitleEn: "", // 英文标题
  noticeContentZh: "", // 中文内容
  noticeContentEn: "", // 英文内容
  updateTime: "",
});
// 表单验证规则 - 除上传文件外均为必填
const addNoticeRules = ref({
  // 中文字段验证
  noticeTitleZh: [
    { required: true, message: "请输入中文公告标题", trigger: "blur" },
  ],
  noticeContentZh: [
    { required: true, message: "请输入中文公告内容", trigger: "blur" },
  ],
  noticeType: [
    { required: true, message: "请选择中文公告类型", trigger: "change" },
  ],
  // 英文字段验证
  noticeTitleEn: [
    { required: true, message: "请输入英文公告标题", trigger: "blur" },
  ],
  noticeContentEn: [
    { required: true, message: "请输入英文公告内容", trigger: "blur" },
  ],
  // 时间字段验证（保留原逻辑）
  validStartTime: [
    { required: true, message: "请选择有效开始时间", trigger: "change" },
  ],
  validEndTime: [
    { required: true, message: "请选择有效结束时间", trigger: "change" },
  ],
});

// 公告类型选项
const noticeTypeOptions = ref([]);

// 查询表单数据
const queryForm = ref({
  loginName: "",
  title: "",
  status: "",
});

// 表格数据
let tableData = ref([]);

// 分页相关数据
let currentPage = ref(1);
let pageSize = ref(10);
let total = ref(0);

// 处理重置
const handleReset = () => {
  queryForm.value.title = "";
  queryForm.value.status = "";
  queryForm.value.loginName = "";
  pageSize.value = 10;
  currentPage.value = 1;
  getNoticesFull();
};

// 处理每页条数改变
const handleSizeChange = (val) => {
  pageSize.value = val;
  currentPage.value = 1;
  getNoticesFull();
};

// 处理当前页改变
const handleCurrentChange = (val) => {
  currentPage.value = val;
  getNoticesFull();
};

const toBack = () => {
  detailBoxRef.value = false;
};

const toPublished = async (id) => {
  const { code } = await putNoticesIdPublishApi(id);
  if (code === 200) {
    getNoticesFull();
  }
  // else {
  //   ElMessage({ message: msg, type: "warning" });
  // }
};

const handleEidt = async () => {
  isEdit.value = true;
  detailBoxRef.value = false;
  isAddNotice.value = true;

  addNoticeForm.value.noticeTitleZh = backData.value.title;
  addNoticeForm.value.noticeTitleEn = backData.value.titleEn;
  addNoticeForm.value.noticeContentZh = backData.value.content; // 存储HTML内容到表单
  addNoticeForm.value.noticeContentEn = backData.value.contentEn; // 存储HTML内容到表单
  addNoticeForm.value.validStartTime = backData.value.effectiveTime;
  addNoticeForm.value.validEndTime = backData.value.expireTime;
  addNoticeForm.value.noticeType = backData.value.type;
  nextTick().then(() => {
    initEditorZh(backData.value.content);
    initEditorEn(backData.value.contentEn);
  });
};

const toSeeDetail = async (id) => {
  isEdit.value = true;
  const { code, data } = await noticesIdApi(id);
  if (code === 200) {
    backData.value = {};
    backData.value = data;
    detailBoxRef.value = true;
    lookData.value.noticeContentEn = data.contentEn;
    lookData.value.noticeContentZh = data.content;
    lookData.value.noticeTitleEn = data.titleEn;
    lookData.value.noticeTitleZh = data.title;
    lookData.value.updateTime = data.updateTime;
  }
  // else {
  //   ElMessage({ message: msg, type: "warning" });
  // }
};

// 重置新增公告表单
const handleResetAddForm = () => {
  // 重置中文字段
  addNoticeForm.value.noticeTitleZh = "";
  addNoticeForm.value.noticeContentZh = "";
  addNoticeForm.value.noticeType = "";
  addNoticeForm.value.fileListZh = [];
  // 重置英文字段
  addNoticeForm.value.noticeTitleEn = "";
  addNoticeForm.value.noticeContentEn = "";
  addNoticeForm.value.fileListEn = [];
  // 重置时间字段
  addNoticeForm.value.validStartTime = "";
  addNoticeForm.value.validEndTime = "";
  if (addNoticeFormRef.value) {
    addNoticeFormRef.value.clearValidate(); // 清除所有字段的验证状态
  }
  if (editorZh.value) editorZh.value.txt.clear();
  if (editorEn.value) editorEn.value.txt.clear();
};

// 新增公告处理
const handleAddNotice = async () => {
  if (editorZh.value)
    addNoticeForm.value.noticeContentZh = editorZh.value.txt.html();
  if (editorEn.value)
    addNoticeForm.value.noticeContentEn = editorEn.value.txt.html();
  // 表单验证
  try {
    await addNoticeFormRef.value.validate();
    const formData = new FormData();
    const noticeData = {
      content: addNoticeForm.value.noticeContentZh,
      contentEn: addNoticeForm.value.noticeContentEn,
      effectiveTime: addNoticeForm.value.validStartTime,
      expireTime: addNoticeForm.value.validEndTime,
      title: addNoticeForm.value.noticeTitleZh,
      titleEn: addNoticeForm.value.noticeTitleEn,
      type: addNoticeForm.value.noticeType,
      id: backData.value?.id,
    };
    const noticeBlob = new Blob([JSON.stringify(noticeData)], {
      type: "application/json",
    });
    formData.append("body", noticeBlob);

    const zhFile = addNoticeForm.value.fileListZh[0];
    if (zhFile && zhFile.raw) {
      formData.append("zhFile", zhFile.raw);
    }

    const enFile = addNoticeForm.value.fileListEn[0];
    if (enFile && enFile.raw) {
      formData.append("enFile", enFile.raw);
    }
    if (!isEdit.value) {
      const { code } = await postNoticesApi(formData);
      if (code === 200) {
        handleCancelAdd();
        handleResetAddForm();
        getNoticesFull();
        ElMessage.success("新增成功");
      }
      // else {
      //   ElMessage.error(msg);
      // }
    } else {
      const { code } = await putNoticesApi(formData);
      if (code === 200) {
        handleCancelAdd();
        handleResetAddForm();
        getNoticesFull();
        ElMessage.success("更新成功");
      }
      // else {
      //   ElMessage.error(msg);
      // }
    }
  } catch (error) {
    return;
  }
};

// 关闭新增公告弹窗
const handleCancelAdd = () => {
  isAddNotice.value = false;
  // 销毁编辑器实例
  destroyEditor();
};

// 打开新增公告弹窗
const handleAddNoticeBtn = () => {
  isAddNotice.value = true;
  nextTick().then(() => {
    initEditorZh();
    initEditorEn();
  });
};

const setEditorContent = (editorInstance, content) => {
  if (editorInstance && content) {
    editorInstance.txt.html(content);
  }
};

// 中文编辑器初始化
const initEditorZh = (defaultContent = "") => {
  if (editorInitializedZh.value || !editorContainerZh.value) return;
  try {
    editorZh.value = new WangEditor(editorContainerZh.value);
    const { config } = editorZh.value;
    config.menus = [
      "bold",
      "italic",
      "underline",
      "strikeThrough",
      "foreColor",
      "fontSize",
      "fontFamily",
      "head",
      "justify",
    ];
    config.height = 160;
    config.zIndex = 100;
    config.menuZindex = 9999;
    config.placeholder = "请输入不超过长度1000的内容";
    config.fontSizes = {
      "x-small": { name: "12px", value: "1" },
      small: { name: "14px", value: "2" },
      normal: { name: "16px", value: "3" },
      large: { name: "18px", value: "4" },
      "x-large": { name: "24px", value: "5" },
      "xx-large": { name: "32px", value: "6" },
      "xxx-large": { name: "48px", value: "7" },
    };
    config.onchange = (html) => {
      addNoticeForm.value.noticeContentZh = html;
    };
    editorZh.value.create();
    setEditorContent(editorZh.value, defaultContent);
    const justifyMenu = editorZh.value.menus.menuList.find(
      (menu) => menu.key === "justify"
    );
    if (justifyMenu) {
      justifyMenu.clickHandler();
    }
    editorInitializedZh.value = true;
  } catch (err) {
    console.error("中文编辑器初始化错误:", err);
  }
};

// 英文编辑器初始化（与中文逻辑一致，仅赋值字段不同）
const initEditorEn = (defaultContent = "") => {
  if (editorInitializedEn.value || !editorContainerEn.value) return;
  try {
    editorEn.value = new WangEditor(editorContainerEn.value);
    const { config } = editorEn.value;
    config.menus = [
      "bold",
      "italic",
      "underline",
      "strikeThrough",
      "foreColor",
      "fontSize",
      "fontFamily",
      "head",
      "justify",
    ];
    config.height = 160;
    config.zIndex = 90;
    config.menuZindex = 8888;
    config.placeholder = "请输入不超过长度2000的内容";
    config.onchange = (html) => {
      addNoticeForm.value.noticeContentEn = html;
    };
    config.fontSizes = {
      "x-small": { name: "12px", value: "1" },
      small: { name: "14px", value: "2" },
      normal: { name: "16px", value: "3" },
      large: { name: "18px", value: "4" },
      "x-large": { name: "24px", value: "5" },
      "xx-large": { name: "32px", value: "6" },
      "xxx-large": { name: "48px", value: "7" },
    };
    editorEn.value.create();
    setEditorContent(editorEn.value, defaultContent);
    const justifyMenu = editorEn.value.menus.menuList.find(
      (menu) => menu.key === "justify"
    );
    if (justifyMenu) {
      justifyMenu.clickHandler();
    }
    editorInitializedEn.value = true;
  } catch (err) {
    console.error("英文编辑器初始化错误:", err);
  }
};

// 销毁所有编辑器
const destroyEditor = () => {
  // 销毁中文编辑器
  if (editorZh.value && typeof editorZh.value.destroy === "function") {
    editorZh.value.destroy();
    editorZh.value = null;
    editorInitializedZh.value = false;
  }
  // 销毁英文编辑器
  if (editorEn.value && typeof editorEn.value.destroy === "function") {
    editorEn.value.destroy();
    editorEn.value = null;
    editorInitializedEn.value = false;
  }
};

const getTypesNotice = async () => {
  const { code, data } = await typesNoticeApi();
  if (code === 200) {
    noticeTypeOptions.value = data;
  }
  // else {
  //   ElMessage({ message: msg, type: "warning" });
  // }
};

const toFindDetail = async (id) => {
  isEdit.value = false;
  const { code, data } = await noticesIdApi(id);
  if (code === 200) {
    detailBoxRef.value = true;
    lookData.value.noticeContentEn = data.contentEn;
    lookData.value.noticeContentZh = data.content;
    lookData.value.noticeTitleEn = data.titleEn;
    lookData.value.noticeTitleZh = data.title;
    lookData.value.updateTime = data.updateTime;
  }
  // else {
  //   ElMessage({ message: msg, type: "warning" });
  // }
};

const deleteNoticesId = async (id) => {
  const { code } = await deleteNoticesIdApi(id);
  if (code === 200) {
    getNoticesFull();
  }
  // else {
  //   ElMessage({ message: msg, type: "warning" });
  // }
};

const getNoticesFull = async () => {
  const paramsObj = {
    title: queryForm.value.title,
    isPublished: queryForm.value.status,
    loginName: queryForm.value.loginName,
    pageNum: currentPage.value,
    pageSize: pageSize.value,
  };
  const { code, data } = await noticesFullApi(paramsObj);
  if (code === 200) {
    tableData.value = data.list;
    total.value = data.total;
  }
  // else {
  //   ElMessage({ message: msg, type: "warning" });
  // }
};

// 监听弹窗关闭，确保编辑器被销毁
watch(isAddNotice, (newVal) => {
  if (!newVal) {
    destroyEditor();
  }
});

onMounted(() => {
  getNoticesFull();
  getTypesNotice();
});

// 组件卸载时销毁编辑器
onUnmounted(() => {
  destroyEditor();
});
</script>

<style scoped lang="scss">
.tipText {
  padding-left: 170px;
  color: #ff0004;
}
.query-container {
  position: relative;
  text-align: left;
  font-size: 14px;
  color: #222;
  .shawBox {
    min-height: calc(100vh - 113px);
    overflow: hidden;
    fill: #fff;
    border-radius: 12px;
    background-color: #fff;
    filter: drop-shadow(0 0 15px rgba(14, 41, 73, 0.1));
    padding: 15px;
    box-sizing: border-box;
    .shawFooter {
      margin-right: 36px;
      float: right;
      color: #000;
      font-size: 14px;
      font-weight: 400;
    }
    .contextTextBox {
      font-size: 14px;
      overflow: hidden;
      padding-left: 36px;
    }
    .shawTitle {
      line-height: 50px;
      clear: both;
      color: #000;
      font-size: 16px;
      font-weight: 700;
      i {
        margin-top: 12px;
        margin-right: 10px;
        float: left;
        width: 24px;
        height: 24px;
        background-image: url("../../assets/images/home/dingwei.png");
        background-position: left center;
        background-size: contain;
        background-repeat: no-repeat;
      }
    }
  }
}

::v-deep .add-notice-form .el-form-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
::v-deep .add-notice-form .el-form-item__content {
  flex: 1;
  width: auto !important;
}
::v-deep .add-notice-form .el-select,
::v-deep .add-notice-form .el-date-editor,
::v-deep .add-notice-form .el-input {
  width: 100% !important;
}

:deep(.el-form--inline .el-form-item) {
  margin-right: 22px;
  margin-bottom: 15px;
}
:deep(.el-form-item__label) {
  color: #222;
}
.query-form {
  position: relative;
}
:deep(.el-pager li.is-active) {
  color: #fff;
  background: #286bf4;
  cursor: default;
  font-weight: bold;
}

/* 自定义表格样式 */
::v-deep .custom-table .el-table__header {
  height: 40px;
  line-height: 40px;
  background: #f6f9ff;
}
::v-deep .custom-table .el-table__header th {
  font-size: 12px;
  font-weight: 700;
  background: #f6f9ff;
  color: #222;
}
::v-deep .custom-table .el-table__row:nth-child(even) {
  background: #f9fbfd !important;
}
::v-deep .custom-table .el-table__row:nth-child(odd) {
  background-color: transparent;
}
::v-deep .custom-table .el-table__body td {
  color: #222;
}
:deep(.el-table .cell) {
  text-align: left;
}
/* 更新部分 */
::v-deep .custom-table .el-table__body td {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 0 !important;
  width: 100% !important; /* 继承列的固定宽度 */
}
::v-deep .custom-table .el-table__body .cell {
  width: 100% !important;
  overflow: hidden !important;
}
:deep(.custom-tooltip) {
  background-color: #286bf4 !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
}
::v-deep .shawBox {
  /* 输入框字体 */
  .el-input__inner {
    font-size: 12px !important;
  }
  /* 下拉选择器 选中项字体 */
  .el-select__selected-item {
    font-size: 12px !important;
  }
  /* 下拉选择器 占位符字体 */
  .el-select__placeholder {
    font-size: 12px !important;
  }
  /* 下拉选择器 下拉选项字体 */
  .el-select-dropdown__item {
    font-size: 12px !important;
  }
  /* 日期选择器 关联输入框字体 */
  .el-date-editor .el-input__inner {
    font-size: 12px !important;
  }
}

font[size="1"] {
  font-size: 12px;
}
font[size="2"] {
  font-size: 14px;
}
font[size="3"] {
  font-size: 16px;
}
font[size="4"] {
  font-size: 18px;
}
font[size="5"] {
  font-size: 24px;
}
font[size="6"] {
  font-size: 32px;
}
font[size="7"] {
  font-size: 48px;
}
</style>
